<template>
    <div>
      <n-grid :x-gap="10" :y-gap="5" :cols="3">
      <n-grid-item :offset="1">
        <n-carousel show-arrow>
          <img
            class="carousel-img"
            :src="'https://omsv2-static.fnji.com/'+route.query.picLeft"
          >
          <img
            class="carousel-img"
            src="https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel2.jpeg"
          >
          <img
            class="carousel-img"
            src="https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel3.jpeg"
          >
          <img
            class="carousel-img"
            src="https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel4.jpeg"
          >
        </n-carousel>
      </n-grid-item>
    <n-grid-item :offset="1">
      <n-input v-model:value="name"/>
    </n-grid-item>
    <n-grid-item :offset="1">
      <n-select v-model:value="fnjiType" size="medium" :options="options" clearable />
    </n-grid-item>
    <n-grid-item :offset="1">
      <n-button type="primary" size="medium" @click="handleUpdate">
        确认修改
      </n-button>
    </n-grid-item>
    </n-grid>
    </div>
    
</template>
<script setup>
import { ref } from 'vue';
import { useRoute } from 'vue-router';
import { productPutApi } from '../../api/product';
const route = useRoute()
const name = ref(route.query.name)
const fnjiType = ref(route.query.fnjiType)
const options = [
    {
      label: '家具',
      value: '1'
    },
    {
      label: '家居',
      value: '2'
    }
]
const handleUpdate = async ()=>{
  let res = await productPutApi(
    route.query._id,
    {
      'name':name.value,
      'fnjiType':fnjiType.value
    }
  )
}
</script>

<style lang="scss" scoped>
.carousel-img {
  width: 100%;
  /* height: 240px; */
  object-fit: cover;
}
</style>